<script setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getShopHotelDetail, getselectAllByPrice } from "@/server/api/shopApi";
import { useUseStore } from "@/stores/user";
import { OpenChildrenPage } from "@/hook/routerHandle.js";

// 控制弹窗显示状态
import {
  initMap,
  getLocation,
  getDistance,
  moveTarget,
} from "@/utils/mapHandle";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const images = ref([]);
let ImgScr = useUseStore().ing;
const roomList = ref([]); //所有房型
const address = ref("");
const showContactInfo = ref(false);
const longAndLat = ref([]); //存经纬度的数组
const addressDetile = ref(""); //传给地图的信息
const storePhone = ref(""); //酒店电话
const shopName = ref("") //酒店名称
let shopInfo = {
  ascending: false, //升序
  descending: false, //降序
  priceSearch: false, //开启升降
  status: 0,
  shopId: route.query.shopId, //id
};

const getHotedetail = async () => {
  const res = await getShopHotelDetail(route.query.shopId);
  addressDetile.value = res.data.data;
  storePhone.value = res.data.data.phone
  longAndLat.value.push(
    res.data.data.localhostLatitude,
    res.data.data.localhostLongitude
  );
  shopName.value = res.data.data.shopName
  images.value = res.data.data.shopImagList;
  address.value = res.data.data.address;
};


// 查询所有的房型
const getselectAll = async () => {
  const res = await getselectAllByPrice(shopInfo);
  roomList.value = res.data.data;
};

const toDetaile = (i) => {
  const appliance = JSON.stringify(i.appliance);
  i.appliance = appliance;

  const bath = JSON.stringify(i.bath);
  i.bath = bath;

  const basics = JSON.stringify(i.basics);
  i.basics = basics;

  i.shopId = route.query.shopId;
  router.push({
    path: "/hotelDetail",
    query: i,
    // query: i,
  });
};

onMounted(() => {
  //初始化地图

  getHotedetail();
  getselectAll();
});
</script>


<template>
  <div class="htResource">
    <!-- 顶部轮播图 -->
    <div class="top">
      <div class="back">
        <van-icon name="arrow-left" size="30px" @click="$router.back()" />
      </div>
      <van-swipe :autoplay="3000" lazy-render class="my-swipe">
        <van-swipe-item v-for="(i, index) in images" :key="index">
          <img :src="i" alt="酒店图片" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 酒店信息模块 -->
    <div class="hotel-info">
      <h2>{{ shopName }}</h2>
      <div class="address">
        <span>地址：{{ address }}</span>
        <van-icon name="location-o" size="20px" color="#f44" @click="OpenChildrenPage('/mapView', addressDetile)" />
      </div>
    </div>

    <!-- 房间信息模块 -->
    <div class="room-list">
      <h3>房型信息</h3>
      <div class="room-item" v-for="(i, index) in roomList" :key="i.roomId">
        <div class="room-image">
          <!-- 房间图片 -->
          <img :src="i.imageList[0]" alt="房间图片" />
        </div>

        <!-- 房间详细信息 -->
        <div class="room-details">
          <div v-if="i.piFlag === 1" class="pi-icon">
            <div class="PiLogo">Pi</div>
          </div>
          <h4>{{ i.bedType }}</h4>
          <p>{{ i.detail }}</p>
          <div class="room-price">金额：<span>{{ i.price }}</span></div>
          <button class="btn-book" @click="toDetaile(i)">立即预订</button>
        </div>
      </div>

    </div>

    <!-- 底部操作栏 -->
    <div class="bottom-bar">
      <!-- 联系酒店按钮 -->
      <button class="btn-contact" @click="showContactInfo = true">联系酒店</button>
    </div>

    <!-- 联系信息弹出栏 -->
    <transition name="slide-up">
      <div v-if="showContactInfo" class="contact-popup">
        <div class="popup-content">
          <p>商家电话：<span class="phone-number">{{ storePhone }}</span></p>
          <button class="close-btn" @click="showContactInfo = false">关闭</button>
        </div>
      </div>
    </transition>

  </div>
</template>

<style lang="scss" scoped>
/* 信息弹出层背景 */
.contact-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: white;
  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 20px;
  text-align: center;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.slide-up-enter {
  transform: translateY(100%);
  opacity: 0;
}

.slide-up-leave-to {
  transform: translateY(100%);
  opacity: 0;
}

/* 弹出层内容 */
.popup-content {
  font-size: 16px;
  color: #333;
}

.close-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #f44;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.close-btn:hover {
  background-color: #d33;
}

/* 电话号码样式 */
.phone-number {
  font-weight: bold;
  color: #f44;
}

/* 关闭按钮 */
.close-btn {
  margin-top: 10px;
  background-color: #f44;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

/* 房间图片容器样式 */
.room-image {
  position: relative;
  width: 100%;
  height: 150px;
  /* 固定高度，保持布局一致 */
  overflow: hidden;
}


/* PI 币图标样式 */
.pi-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #ffdd57;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* 提升可见性 */
}

/* 房间详细信息样式 */
.room-details {
  padding: 12px;
  text-align: left;
}

.room-details h4 {
  font-size: 16px;
  color: #333;
  margin-bottom: 6px;
}

.room-details p {
  font-size: 14px;
  color: #777;
  margin-bottom: 10px;
}

.room-price {
  font-size: 14px;
  font-weight: bold;
  color: #ff5722;
  margin-bottom: 10px;
}

/* 立即预订按钮样式 */
.btn-book {
  display: block;
  width: 100%;
  background-color: #ff5722;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-book:hover {
  background-color: #e64a19;
}

/* 房间容器样式 */
.room-item {
  position: relative;
  /* 为子元素提供相对定位基准 */
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

/* 房间图片容器 */
.room-image {
  position: relative;
  /* 设置为相对定位，以便图标绝对定位 */
}

.room-image img {
  width: 100%;
  height: auto;
  padding: 4px;
  border-radius: 10px 10px 0 0;
  object-fit: cover;
  /* 保持图片比例裁剪 */
  border: 1px solid #eee9f0;

}

/* PI 币图标 */
.pi-icon {
  position: absolute;
  top: 10px;
  /* 调整到图片的右上角 */
  right: 10px;
  width: 24px;
  /* 设置适当大小 */
  height: 24px;
  z-index: 10;
  /* 保证在图片之上显示 */
  padding: 2px;
}

.pi-icon img {
  width: 100%;
  /* 图标自适应容器大小 */
  height: 100%;
  object-fit: cover;
}

.htResource {
  width: 100vw;
  background-color: #f8f8f8;
  min-height: 100vh;

  .top {
    position: relative;
    width: 100%;
    height: 300px;

    .back {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 10;
      background-color: rgba(255, 255, 255, 0.8);
      /* 半透明白色背景 */
      border-radius: 50%;
      /* 圆形背景 */
      padding: 5px;
      /* 内边距，让按钮看起来更大 */
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      /* 添加阴影 */
      transition: background-color 0.3s;
    }


    .my-swipe {
      height: 100%;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .hotel-info {
    padding: 20px;
    background: #fff;
    border-radius: 10px;
    margin: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    h2 {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .address {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #666;

      span {
        flex: 1;
      }

      .van-icon {
        cursor: pointer;
      }
    }
  }

  .room-list {
    margin: 10px;
    flex: 1;
    /* 让内容区域自适应高度 */
    overflow-y: auto;
    /* 开启内容滚动 */
    padding-bottom: 60px;

    /* 根据底部操作栏的高度调整 */
    h3 {
      font-size: 18px;
      font-weight: bold;
      padding: 10px;
      background: #fff;
      border-radius: 10px;
      margin-bottom: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    .room-item {
      display: flex;
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      margin-bottom: 10px;
      overflow: hidden;

      .room-image {
        width: 100px;
        height: 100px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .room-details {
        flex: 1;
        padding: 10px;

        .PiLogo {
          position: absolute;
          left: 0;
          top: 0;

          padding: 2rem 12rem;

          font-size: 14rem;
          font-weight: 500;
          line-height: 20rem;
          color: #fff;

          background: #642e8e;
          border-radius: 8rem 0rem 8rem 0rem;
        }

        h4 {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        p {
          font-size: 14px;
          color: #666;
          margin-bottom: 10px;
        }

        .room-price {
          font-size: 16px;
          font-weight: bold;
          color: #333;

          span {
            color: #f44;
          }
        }

        .btn-book {
          margin-top: 10px;
          width: 100%;
          padding: 10px;
          background: linear-gradient(45deg, #ff9c00, #ff4500);
          border: none;
          border-radius: 5px;
          color: #fff;
          font-size: 14px;
          cursor: pointer;
        }
      }
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

    .btn-contact,
    .btn-book-all {
      flex: 1;
      margin: 0;
      margin-right: 20px;
      padding: 10px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .btn-contact {
      background: #42a5f5;
    }

    .btn-book-all {
      background: #ff4500;
    }
  }
}
</style>